<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>选中证件类型的弹出框</title>
    <link rel="stylesheet" type="text/css" href="normalize.css">
    <style>
        .credential {
            position: relative;
        }
        .pop-idcard {
            display: none;
            position: absolute;
            right: 0;
            top:1.75rem;
            width: 7.75rem;
            background-color: #eee;
            box-shadow: 0 0 16px rgba(0,0,0,0.3);
        }
        .pop-idcard li {
            width: 7.75rem;
            padding-left: 0.25rem;
            font-size: 0.65rem;
            color: #303030;
            line-height: 1.2rem;
            border-bottom: 1px solid #dadada;
        }
    </style>
    <script src="jquery-2.1.4.min.js"></script>
    <script>
        $(document).ready(function () {
            //添加乘客信息证件类型的效果
            //点击绿色小三角
            $(".card-pull-down").click(function(event) {
//证件类型的弹窗显示或隐藏的切换
                $(".pop-idcard").toggle();
            });
            //点击证件类型的具体项
            $(".pop-idcard li").click(function(event) {

//获取点击当前的字符串值
                var cardClass = $(this).text();
//把证件类型里面显示的字符串换成弹出选项的那个证件类型
                $(".card-type").text(cardClass);
//把证件类型弹出框隐藏
                $(".pop-idcard").hide();
            });
        })

    </script>
</head>
<body>
<ul>
    <li>dd</li>
    <li class="common-passenger-item credential">
        证件类型
        <span class="card-type">身份证</span>
        <span class="card-pull-down">444</span>
        <ul class="pop-idcard">
            <li>暂无证件</li>
            <li>身份证</li>
            <li>护照</li>
            <li>军官证</li>
            <li>港澳通行证</li>
            <li>台湾通行证</li>
            <li>台胞证</li>
            <li>回乡证</li>
            <li>户口薄</li>
            <li>出生证明</li>
            <li>其他</li>
        </ul>
    </li>
</ul>


</body>
</html>